:root {
    color-scheme: light dark;
}

body {
    margin: 0;
    background-color: #f4f4f4;
    color: #000000;
    font-size: 16px;

    /* ★フォント適用（custom/preset/google 全対応） */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
}

body {
    background-color: light-dark(#f4f4f4, #f4f4f4);
    color: light-dark(#000000, #000000);
}

form input,
form textarea,
form select,
form button {
    color-scheme: light;

    /* ★フォーム類も同じフォントに */
    font-family: inherit;
}

a {
    color: #0000FF;
    color: light-dark(
        #0000FF,
        #0000FF    );
}
a:visited {
    color: #663399;
    color: light-dark(
        #663399,
        #663399    );
}
a:active {
    color: #FF0000;
    color: light-dark(
        #FF0000,
        #FF0000    );
}

.quote-text {
    color: #666666;
    color: light-dark(
        #666666,
        #666666    );
}

.comment-text {
    color: #333333;
    color: light-dark(
        #333333,
        #333333    );
}

.note-text {
    color: #333333;
    color: light-dark(
        #333333,
        #333333    );
}

.name {
    color: #007700;
    color: light-dark(
        #007700,
        #007700    );
}

.cap {
    color: #ff4500;
    color: light-dark(
        #ff4500,
        #ff4500    );
}

.deleted-message {
    color: #ff0000;
    color: light-dark(
        #ff0000,
        #ff0000    );
}

.error-message {
    color: #ff0000;
    color: light-dark(
        #ff0000,
        #ff0000    );
}

hr {
    border: none;
    border-top: 1px solid #cccccc;
    border-top-color: light-dark(
        #cccccc,
        #cccccc    );
}

.embed-post {
    background-color: #f4f4f4;
    color: #000000;
    background-color: light-dark(
        #f4f4f4,
        #f4f4f4    );
    color: light-dark(
        #000000,
        #000000    );
}

mark {
    background-color: transparent;
    color: inherit;
    margin: 0 5px;
}

/* パンくずリスト */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    list-style: none;
    padding-left: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding: 0 0.5rem;
    content: ">";
    vertical-align: middle;

    color: #000000;
    color: light-dark(
        #000000,
        #000000    );
}

/* 最後のパンくずリスト項目のリンクを無効にする */
.breadcrumb-item:last-child a {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
}

/* スマートフォン用スタイル */
@media (max-width: 640px) {
    .embed-contents {
        position: relative;
        width: 100%;
        max-height: 200px;
        overflow: hidden;
    }
    .embed-instagram {
        width: 100%;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-video iframe {
        width: 100%;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-youtube iframe {
        width: 100%;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-youtube {
        width: 100%;
        height: 360px !important;
        max-height: 360px !important;
    }

    .img-thumbnail, .embed-youtube-img, .embed-image, .video-thumbnail {
        max-width: 128px;
        max-height: auto;
    }
}

/* パソコン用スタイル */
@media (min-width: 641px) {
    .embed-contents {
        position: relative;
        width: 100%;
        max-height: 350px;
        overflow: hidden;
    }

    .embed-instagram {
        width: 600px;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-video iframe {
        width: 600px;
        height: 360px !important;
        max-height: 360px !important;
    }

    .embed-youtube iframe {
        width: 600px;
        height: 360px !important;
        max-height: 360px !important;
    }

    .img-thumbnail, .embed-youtube-img, .embed-image, .video-thumbnail {
        max-width: 128px;
        max-height: auto;
        cursor: pointer;
    }
}

img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

img {
    max-height: 512px;
}

@font-face {
  font-family: 'spleen-32x64';
  src: url('https://cdn.hamster.land/system/spleen-32x64.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: 'spleen-32x64', sans-serif;
}

html {
  --background-image: url('https://cdn.hamster.land/system/backimage-light.gif');
}

html[data-theme="default"],
html[data-theme="light"],
html[data-theme="dark"] {
  --background-image: url('https://cdn.hamster.land/system/backimage-light.gif');
}

body {
  background-image: var(--background-image);
}

.breadcrumb {
  margin-top: 16px;
}

.btn-spacing {
  padding: 0px 10px 0px 10px;
  text-align: center;
  letter-spacing: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.user-icon {
  flex-shrink: 0;
  width: 75px;
  height: 75px;
  background: linear-gradient(135deg, #e0e0e0, #f8f8f8);
  border: 2px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.user-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.disabled {
  pointer-events: none;
  background-color: #e0e0e0;
  color: #a0a0a0;
  cursor: not-allowed;
}

.responsive-img {
  width: 33%;
  height: auto;
}

@media (min-width: 576px) {
  .grid-item {
    width: 25% !important;
  }
}

@media (min-width: 768px) {
  .grid-item {
    width: 20% !important;
  }
}

@media (min-width: 992px) {
  .grid-item {
    width: 20% !important;
  }
}

@media (min-width: 1200px) {
  .grid-item {
    width: 16.66% !important;
  }
}

.file-size-overlay {
  display: block;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  width: 100%;
  padding: 3px 0;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
  border-radius: 0 0 4px 4px;
  box-sizing: border-box;
}

.file-item img {
  display: block;
}

.thread {
  margin: 0px 0px 8px 8px;
}

nav.navbar {
  background-color: #f8f9fa !important;
}

nav.navbar a.nav-link,
nav.navbar .navbar-brand {
  color: #000000 !important;
}

nav.navbar a.nav-link:hover {
  color: #333333 !important;
}

.btn.vote-btn[data-vote-type="good"] {
  background-color: #00bbbb;
  color: #ffffff;
}

.btn.vote-btn[data-vote-type="bad"] {
  background-color: #cc0000;
  color: #ffffff;
}

.posts {
  position: relative;
  border: 1px solid #000;
  padding: 15px;
  border-radius: 5px;
  margin: 0 3px 15px;
  background-color: #F8F9FA;
  overflow: hidden;
}

.posts::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://cdn.hamster.land/1/admin/fd9c18010b.png") top left / 120px repeat;
  opacity: 0.33;
  pointer-events: none;
  z-index: 0;
}

.posts > * {
  z-index: 1;
  position: relative;
}

.embed-post .posts {
  border: none;
}

.mikle-post-card .mikle-report-link {
  display: inline-flex;
}

.mikle-post-card .mikle-report-link a,
.mikle-post-card .mikle-report-link button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d2d2d2;
  border-radius: 3px;
  background: #fff;
  text-decoration: none;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.mikle-post-card .mikle-report-link a::before,
.mikle-post-card .mikle-report-link button::before {
  content: "👧";
  font-size: 21px;
  line-height: 1;
  color: #9d93af;
}

.mikle-post-card .mikle-reply-link {
  display: inline-flex;
}

.mikle-post-card .mikle-reply-link a,
.mikle-post-card .mikle-reply-link button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border-bottom: 2px solid #ee9faa;
  text-decoration: none;
  color: #ef8b95 !important;
  font-size: 14px;
  font-weight: 700;
  background: transparent;
}

.mikle-post-card .mikle-reply-link a::before,
.mikle-post-card .mikle-reply-link button::before {
  content: "✎";
  margin-right: 5px;
  font-size: 14px;
}

.mikle-post-card .mikle-good-ui {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.mikle-post-card .mikle-good-ui:focus-visible {
  outline: 2px solid rgba(239, 143, 151, .35);
  outline-offset: 3px;
  border-radius: 14px;
}

.mikle-post-card .mikle-good-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  line-height: 1;
  color: #ffffff;
  transform: translateY(-1px);
  transform-origin: center center;
  flex: 0 0 28px;
  transition: color .18s ease, transform .18s ease, filter .18s ease;
}

.mikle-post-card .mikle-good-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mikle-post-card .mikle-good-icon svg path {
  fill: currentColor;
  stroke: #ef8f97;
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill markers;
  transition: stroke .18s ease, fill .18s ease;
}

.mikle-post-card .mikle-good-icon::after {
  content: "✦";
  position: absolute;
  right: -7px;
  top: -6px;
  font-size: 11px;
  line-height: 1;
  color: #ffb8c4;
  opacity: 0;
  transform: scale(.4) rotate(-20deg);
  pointer-events: none;
}

.mikle-post-card .mikle-good-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 33px;
  padding: 0 13px;
  border: 1px solid #8f8a8a;
  border-radius: 12px;
  background: #fffdfa;
  color: #444;
  font-size: 14px;
  line-height: 1;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mikle-post-card .mikle-good-bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -6px;
  width: 10px;
  height: 10px;
  background: #fffdfa;
  border-top: 1px solid #8f8a8a;
  border-left: 1px solid #8f8a8a;
  transform: translateY(-50%) rotate(-45deg);
  box-sizing: border-box;
  transition: background .18s ease, border-top-color .18s ease, border-left-color .18s ease;
}

.mikle-post-card .mikle-good-label {
  padding: 0 13px;
}

.mikle-post-card .mikle-good-count {
  min-width: 34px;
  padding: 0 10px;
}

.mikle-post-card .mikle-good-ui:hover .mikle-good-icon {
  filter: drop-shadow(0 2px 4px rgba(239, 143, 151, .18));
}

.mikle-post-card .mikle-good-ui:hover .mikle-good-bubble {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px rgba(239, 143, 151, .10);
}

.mikle-post-card .mikle-good-ui:active .mikle-good-bubble {
  transform: translateY(0) scale(.98);
}

.mikle-post-card .mikle-good-ui:active .mikle-good-icon {
  transform: translateY(-1px) scale(.94);
}

/* 初期表示で既に投票済み */
.mikle-post-card .mikle-good-ui.is-voted,
.mikle-post-card .mikle-good-ui.is-voted-1,
.mikle-post-card .mikle-good-ui[data-user-voted="1"],
.mikle-post-card .mikle-good-ui[aria-pressed="true"] {
  --mikle-good-voted: 1;
}

.mikle-post-card .mikle-good-ui.is-voted .mikle-good-icon,
.mikle-post-card .mikle-good-ui.is-voted-1 .mikle-good-icon,
.mikle-post-card .mikle-good-ui[data-user-voted="1"] .mikle-good-icon,
.mikle-post-card .mikle-good-ui[aria-pressed="true"] .mikle-good-icon {
  color: #ef8f97;
  filter: drop-shadow(0 1px 2px rgba(239,143,151,.18));
}

.mikle-post-card .mikle-good-ui.is-voted .mikle-good-icon svg path,
.mikle-post-card .mikle-good-ui.is-voted-1 .mikle-good-icon svg path,
.mikle-post-card .mikle-good-ui[data-user-voted="1"] .mikle-good-icon svg path,
.mikle-post-card .mikle-good-ui[aria-pressed="true"] .mikle-good-icon svg path {
  stroke: #ef8f97;
}

.mikle-post-card .mikle-good-ui.is-voted .mikle-good-label,
.mikle-post-card .mikle-good-ui.is-voted .mikle-good-count,
.mikle-post-card .mikle-good-ui.is-voted-1 .mikle-good-label,
.mikle-post-card .mikle-good-ui.is-voted-1 .mikle-good-count,
.mikle-post-card .mikle-good-ui[data-user-voted="1"] .mikle-good-label,
.mikle-post-card .mikle-good-ui[data-user-voted="1"] .mikle-good-count,
.mikle-post-card .mikle-good-ui[aria-pressed="true"] .mikle-good-label,
.mikle-post-card .mikle-good-ui[aria-pressed="true"] .mikle-good-count {
  background: #fff3f5;
  border-color: #e7bcc4;
  color: #d96a77;
}

.mikle-post-card .mikle-good-ui.is-voted .mikle-good-label::before,
.mikle-post-card .mikle-good-ui.is-voted .mikle-good-count::before,
.mikle-post-card .mikle-good-ui.is-voted-1 .mikle-good-label::before,
.mikle-post-card .mikle-good-ui.is-voted-1 .mikle-good-count::before,
.mikle-post-card .mikle-good-ui[data-user-voted="1"] .mikle-good-label::before,
.mikle-post-card .mikle-good-ui[data-user-voted="1"] .mikle-good-count::before,
.mikle-post-card .mikle-good-ui[aria-pressed="true"] .mikle-good-label::before,
.mikle-post-card .mikle-good-ui[aria-pressed="true"] .mikle-good-count::before {
  background: #fff3f5;
  border-top-color: #e7bcc4;
  border-left-color: #e7bcc4;
}

.mikle-post-card .mikle-good-ui.is-loading {
  opacity: .72;
  pointer-events: none;
}

/* 豪華アニメーション */
.mikle-post-card .mikle-good-ui.is-burst .mikle-good-icon {
  animation: mikleGoodPop .56s cubic-bezier(.22, 1.35, .36, 1);
}

.mikle-post-card .mikle-good-ui.is-burst .mikle-good-icon::after {
  animation: mikleGoodSparkle .62s ease-out;
}

.mikle-post-card .mikle-good-ui.is-burst .mikle-good-label,
.mikle-post-card .mikle-good-ui.is-burst .mikle-good-count {
  animation: mikleGoodBubbleFloat .52s ease;
}

.mikle-post-card .mikle-good-ui.is-burst .mikle-good-count {
  animation: mikleGoodCount .52s ease;
}

.mikle-post-card .mikle-good-ui.is-burst::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(239,143,151,.24);
  transform: translate(-50%, -50%) scale(.4);
  animation: mikleGoodPulse .52s ease;
  pointer-events: none;
}

.mikle-post-card .mikle-good-ui.is-burst::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(.35);
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 10%, rgba(255,204,214,.65) 18%, rgba(255,182,193,.30) 32%, rgba(255,182,193,0) 68%);
  opacity: 0;
  pointer-events: none;
  animation: mikleGoodFlash .56s ease-out;
}

@keyframes mikleGoodPop {
  0% {
    transform: translateY(-1px) scale(1) rotate(0deg);
  }
  18% {
    transform: translateY(-1px) scale(1.18) rotate(-9deg);
  }
  40% {
    transform: translateY(-1px) scale(1.34) rotate(7deg);
  }
  62% {
    transform: translateY(-1px) scale(.92) rotate(-4deg);
  }
  100% {
    transform: translateY(-1px) scale(1) rotate(0deg);
  }
}

@keyframes mikleGoodCount {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.16);
  }
  55% {
    transform: scale(.96);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes mikleGoodBubbleFloat {
  0% {
    transform: translateY(0);
  }
  32% {
    transform: translateY(-2px);
  }
  65% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes mikleGoodPulse {
  0% {
    opacity: .82;
    transform: translate(-50%, -50%) scale(.45);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.4);
  }
}

@keyframes mikleGoodFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.25);
  }
  18% {
    opacity: .85;
    transform: translate(-50%, -50%) scale(.9);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.7);
  }
}

@keyframes mikleGoodSparkle {
  0% {
    opacity: 0;
    transform: scale(.25) rotate(-30deg) translateY(4px);
  }
  30% {
    opacity: 1;
    transform: scale(1.15) rotate(8deg) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(.7) rotate(28deg) translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mikle-post-card .mikle-good-ui,
  .mikle-post-card .mikle-good-icon,
  .mikle-post-card .mikle-good-bubble,
  .mikle-post-card .mikle-good-icon::after,
  .mikle-post-card .mikle-good-ui::before,
  .mikle-post-card .mikle-good-ui::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 700px) {
  .mikle-post-card .mikle-post-body {
    padding: 14px 14px 10px !important;
  }

  .mikle-post-card .mikle-post-message {
    font-size: 17px !important;
    line-height: 1.9 !important;
  }

  .mikle-post-card .mikle-post-foot {
    padding: 0 12px 14px !important;
    gap: 8px !important;
  }

  .mikle-post-card .mikle-report-link a,
  .mikle-post-card .mikle-report-link button {
    width: 38px;
    height: 38px;
  }

  .mikle-post-card .mikle-report-link a::before,
  .mikle-post-card .mikle-report-link button::before {
    font-size: 20px;
  }

  .mikle-post-card .mikle-good-ui {
    gap: 6px;
  }

  .mikle-post-card .mikle-good-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
  }

  .mikle-post-card .mikle-good-bubble {
    min-height: 31px;
    font-size: 13px;
  }

  .mikle-post-card .mikle-good-label {
    padding: 0 11px;
  }

  .mikle-post-card .mikle-good-count {
    min-width: 32px;
    padding: 0 9px;
  }

  .mikle-post-card .mikle-good-bubble::before {
    left: -5px;
    width: 9px;
    height: 9px;
  }
}